<template>
    <div class="navbar">
        <div class="barlist">
            <a class="item" v-for="(item, index) in data" :key="index" :class="value==index?'active':''" @click="changeTab(index,item)">
                <span>{{item.title}}</span>
            </a>
            <i class="b-line" :style="'transform: translateX('+blinePos+'px);'"></i>
        </div>
        <div class="more">
            <i class="icon icon-setting"></i>
        </div>
    </div>
</template>

<style lang="scss">
    .navbar{
        height: 84px;
        width: 100%;
        overflow: hidden;
        display: flex;
        .barlist{
            width: 650px;
            position: relative;
            margin: 0;
            padding: 0;
            height: 80px;
            overflow-x: scroll;
            .item{
                display:inline-block;
                *display:linlne; 
                zoom: 1;
                float: left;
                padding: 0 25px;
                font-size: 28px;
                height: 80px;
                line-height: 80px;
                list-style: none;
                color: #B2B3B3;
                &.active{
                    color: #000;
                }
            }
            .b-line{
                height: 4px;
                width: 40px;
                background: #000;
                border-radius: 2px;
                position: absolute;
                top: 60px;
                left: 0;
                transition: all 0.5s ease-in-out;
                // transform: translateX(30px);
            }
        }
    }
</style>

<script>
export default {
    name: "navBar",
    props:{
        data:{
            type: Array,
            default: () => {
                return [
                    {
                        id: 1,
                        title: '热门'
                    },
                    {
                        id: 2,
                        title: '微博'
                    },
                    {
                        id: 3,
                        title: '公众号'
                    },
                    {
                        id: 4,
                        title: '知乎'
                    },
                    {
                        id: 5,
                        title: '百度'
                    },
                    {
                        id: 2,
                        title: '微博'
                    },
                    {
                        id: 3,
                        title: '公众号'
                    },
                    {
                        id: 4,
                        title: '知乎'
                    },
                    {
                        id: 5,
                        title: '百度'
                    }
                ]
            }
        },
        value: {
            type: Number,
            default: 0
        }
    },
    data(){
        return {
            blinePos: 30,
            selected: 0
        }
    },
    mounted(){
        this.getActiveDom()
    },
    methods:{
        changeTab(index,item,e){
            this.selected = index
            this.$emit('changeTab', {
                index,
                item
            })
            this.$emit("input", index)
            this.getActiveDom()
        },
        getActiveDom(){
            let i = this.selected
            let el = this.$el.querySelectorAll(".barlist .item")[i]
            window.el = el
            let left = el.offsetLeft
            let width = el.offsetWidth
            this.blinePos = left + 0.5 * width - 10
            console.log(left,width,this.blinePos)
        }
    }
}
</script>